<template>
  <div class="sSideMenu">
    <ul class="list">
      <li
        v-for="item of list"
        :id="'type_' + item.name"
        :key="item.name"
        class="item"
      >
        <a :href="'#'+item.name">
          <div
            :class="['name',item.name===selectedName&&'selected']"
            @click="select(item.name, $event)"
          >
            {{ item.name }}
          </div>
        </a>
        <MenuOutline ref="vMenuOutline" :typeName="item.name" :list="item.list" @select="onSelectOutline" />
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Prop, Component, Emit } from 'vue-property-decorator'
import MenuOutline from './MenuOutline.vue'
import dataApi from '../data-api'

interface RefMenuOutline extends Vue {
  select (id: string): void
  selectedId: string
}

@Component({
  components: { MenuOutline }
})
export default class SideMenu extends Vue {
  @Prop({ default: () => [] }) list!: TypeMenuItem[]
  private selectedName = ''

  get listKey () {
    let keys: any = {}
    this.list.forEach((item: TypeMenuItem, i) => {
      keys[item.name] = i
    })
    return keys
  }
  get selectedIndex () {
    return this.listKey[this.selectedName] || 0
  }
  // @Emit()
  async select (typeName: string) {
    if (this.selectedName === typeName) {
      let classList = ((document.getElementById('type_' + typeName) as HTMLElement).querySelector('.sMenuTree') as HTMLElement).classList
      if (classList.contains('hide')) {
        classList.remove('hide')
      } else {
        classList.add('hide')
      }
      return
    }
    ((document.getElementById('type_' + typeName) as HTMLElement).querySelector('.sMenuTree') as HTMLElement).classList.remove('hide');
    ((this.$refs.vMenuOutline as Vue[])[this.selectedIndex] as RefMenuOutline).selectedId = ''
    this.$set(this.list[this.selectedIndex], 'list', [])
    this.selectedName = typeName
    let item = this.list[this.selectedIndex]
    let data: ArticleData = await dataApi.getMenuTreeList(item.name)
    this.$set(item, 'list', data.outline)
    // this.setHash(undefined)
    this.$emit('select', data.content)
  }
  @Emit('selectOutline')
  onSelectOutline (id: string) {
    // this.setHash(id)
  }
  selectOutline (id: string) {
    // this.setHash(id);
    ((this.$refs.vMenuOutline as Vue[])[this.selectedIndex] as RefMenuOutline).select(id)
  }
  scrollCenter (id: string) {
    let { $el } = this
    let vMenuOutline = (this.$refs.vMenuOutline as Vue[])[this.selectedIndex] as RefMenuOutline
    $el.scrollTop = (document.getElementById('menu_' + vMenuOutline.selectedId) as HTMLElement).offsetTop - $el.clientHeight / 2 + 16
  }
  setHash (id: string | undefined) {
    location.hash = this.selectedName + (id ? '/' + id : '')
  }
}
</script>
<style scoped>
.sSideMenu {
  height: 100%;
  background-color: #f7f7f7;
  border-right: 1px solid #efefef;
  box-sizing: border-box;
  overflow: auto;
  position: relative;
}
.list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.item {

}
.name {
  font-size: 14px;
  white-space: nowrap;
  color: #555;
  cursor: pointer;
  padding: 8px 10px;
}
.name:hover {
  background-color: #e4e4e4;
}
.name.selected {
  background-color: #3998d6;
  color: #fff;
}
.hide {
  display: none;
}
</style>
